<script setup lang="ts">
import { onBeforeUnmount, onMounted } from "vue";
import { getPathMap, updateDisableStatus, initDefaultSelect, getSelectValues, split } from "@/utils";
import type { Sku, Spec, SpecValue, GoodDetail, selectSku } from "@/types/detailTypes/detailTypes.ts";
import useDetailStore from "@/pinia/modules/detailStore/detailStore.ts";

const detailStore = useDetailStore();


interface Props {
   specs: Spec[];
   skus: Sku[];
   skuId?: string;
}

interface Emits {
   (e: "change", sku: selectSku): void;
}

const emits = defineEmits<Emits>();

const props = defineProps<Props>();


const pathMap = getPathMap(props.skus);

/*当前点击的是选中则取消选中即可,当前点击的是未选中，先全部取消，当前点击的选中*/
const changeSelect = (sku: Spec, skuValue: SpecValue) => {
   if (skuValue.disabled) return;
   if (skuValue.select) {
      skuValue.select = false;
   } else {
      sku.values.forEach(item => item.select = false);
      skuValue.select = true;
   }
   updateDisableStatus(props.specs, pathMap);
   const selectValues = getSelectValues(props.specs).filter(value => value);
   if (selectValues.length === props.specs.length) {
      const skuId = pathMap[selectValues.join(split)][0];
      const { id, price, oldPrice, inventory, specs } = props.skus.find(sku => sku.id === skuId) as Sku;
      const specsText: string = specs.reduce((p, c) => `${p} ${c.name}: ${c.valueName}`, "").trim();
      emits("change", { skuId: id, price, oldPrice, inventory, specsText });
   } else {
      emits("change", {} as selectSku);
   }
};

const initDefaultSelect = (goodsDetail: GoodDetail, skuId: string) => {

   const sku: Sku | undefined = goodsDetail.skus.find(sku => sku.id === skuId);
   goodsDetail.specs.forEach((spec, index) => {
      const selectSpecValue: SpecValue | undefined = spec.values.find(specValue => specValue.name === sku?.specs[index].valueName);
      selectSpecValue!.select = true;
   });
};

onMounted(() => {
   updateDisableStatus(props.specs, pathMap);
   if (props.skuId) initDefaultSelect(detailStore.goodDetail, props.skuId as string);
});


onBeforeUnmount(() => {
   detailStore.goodDetail = {} as GoodDetail;
});


</script>

<template>
   <div class="sku">
      <dl v-for="(item) in specs" :key="item.id">
         <dt>{{ item.name }}</dt>
         <dd>
            <template v-for="(value) in item.values" :key="value.name">
               <img :class="{selected:value.select,disabled:value.disabled}" v-if="value.picture" :src="value.picture" :title="value.name" @click="changeSelect(item,value)">
               <span :class="{selected:value.select,disabled:value.disabled}" v-else @click="changeSelect(item,value)">{{ value.name }}</span>
            </template>
         </dd>
      </dl>
   </div>
</template>

<style scoped lang="less">
.sku-state-mixin () {
   border: 1px solid #e4e4e4;
   margin-right: 10px;
   cursor: pointer;
   transition: all .3s linear;
   &.selected {
      border-color: @xtxColor;
   }
   &.disabled {
      opacity: 0.6;
      border-style: dashed;
      cursor: not-allowed;
   }
}

.sku {
   padding-left: 10px;
   padding-top: 20px;

   dl {
      display: flex;
      padding-bottom: 20px;
      align-items: center;

      dt {
         width: 50px;
         color: #999;
      }

      dd {
         flex: 1;
         color: #666;

         > img {
            width: 50px;
            height: 50px;
            margin: 5px 0;
            .sku-state-mixin ();
         }

         > span {
            display: inline-block;
            height: 30px;
            line-height: 28px;
            padding: 0 20px;
            margin: 5px 0;
            .sku-state-mixin ();
         }
      }
   }
}
</style>
